<template>
	<el-card class="layout-query">
		<el-form
      ref="companySelectRef"
      v-loading="loading"
      :inline="true"
      :model="companySelectForm"
    >
			<el-form-item label="单位名称/企业信用代码" prop="keyword">
        <el-select
          v-model="companySelectForm.companyId"
          placeholder="请选择单位名称/输入企业信用代码"
          clearable
          filterable
          style="width: 400px"
          @change="handleCompanySelect()"
        >
          <el-option
            v-for="item in companyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
	<el-card>
    <el-tabs v-model="activeName">
			<el-tab-pane label="标准项目" name="first">
      </el-tab-pane>
			<el-tab-pane label="前瞻性研究项目" name="second">
      </el-tab-pane>
			<el-tab-pane label="复审项目" name="third">
      </el-tab-pane>
		</el-tabs>

    <TabContent
      ref="standardTabRef"
      v-if="activeName === 'first'"
      v-loading="loading"
      :companyId="companySelectForm.companyId"
      type="standard"
    />

  </el-card>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useRoute } from 'vue-router'

import TabContent from './components/tabContent.vue'

const route = useRoute()
const userStore = useUserStore()

const loading = ref(false);
const companyList = ref<any[]>([
  { name: '单位1(3101001)', id: '1' },
  { name: '单位2(3101002)', id: '2' },
  { name: '单位3(3101003)', id: '3' },
  { name: '单位4(3101004)', id: '4' },
  { name: '单位5(3101005)', id: '5' }
])
const companySelectForm = reactive({
  companyId: ''
})
const activeName = ref('first')

const handleCompanySelect = () => {
  activeName.value = 'first';
}
</script>

<style lang="scss" scoped>
.anniu .el-form-item {
	margin-right: 10px !important;
}

.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}

.title {
	font-size: 20px;
	text-align: center;
}

.subtitle {
	font-size: 16px;
	margin: 30px 0 10px;
}

.form {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		min-width: 33.33%;

		.label {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
		}

		.value {
			padding: 2px 20px 2px 5px;
			border-bottom: solid 1px #333;
			font-size: 14px;
			margin-right: 50px;
			flex: 1;
			height: 30px;
			line-height: 30px;
		}
	}
}

.form2 {
	margin-top: 20px;

	.label {
		line-height: 20px;
	}

	.value {
		border-bottom: solid 1px #333;
		font-size: 14px;
		line-height: 28px;
	}
}
</style>
